<template>
    <div>
        <Affix>
            <Row id="header">
                <Col span="5">
                    <a id="logo-link" class="h-center" @click="logoClick">
                        <img style="height: 50px; padding-right: 10px" src="../assets/logo.png">
                        <span style="font-size: 16px;color: white"><strong>EasyMall &nbsp;&nbsp; 内容商城</strong></span>
                    </a>
                </Col>
                <Col span="6">
                    <el-menu
                            default-active="1"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleSelect"
                            background-color="#1f1f21"
                            text-color="#fff"
                            active-text-color="#547df0"
                            router >

                        <el-menu-item class="he" index="1" route="/index"><strong>首页</strong></el-menu-item>
                        <el-menu-item class="he" index="2" route="video">音视频</el-menu-item>
                        <el-menu-item class="he" index="3" route="/doc">文档</el-menu-item>
                        <el-menu-item class="he" index="4" route="/picture">图片</el-menu-item>
                    </el-menu>
                </Col>
                <Col span="4" offset="3">
                    <div class="h-search">
                        <Input search enter-button placeholder="输入你要查找的内容"/>
                    </div>
                </Col>
                <Col span="6">
                    <div class="h-search">
                        <div v-if="loginState">
                            <Poptip placement="bottom-end" trigger="hover" width="280">
                                <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                                <span style="color: yellow; padding-right: 10px">你个比比强</span>

                                <div slot="title" id="info-header">
                                    <Row id="header-info">
                                        <div>
                                            <Col span="5" class="user-col">
                                                <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                                            </Col>
                                            <Col span="10" class="user-col">
                                                <div><span class="username">你个比比强</span></div>
                                                <p><i class="el-icon-mobile-phone"> 15669992273</i></p>
                                            </Col>
                                            <Col span="5" class="user-col">

                                            </Col>
                                        </div>
                                    </Row>
                                </div>
                                <div slot="content">
                                    <Row class="i-userinfo">
                                        <span>余额：</span> <span>&nbsp; 500</span>
                                    </Row>
                                    <Row class="i-userinfo">
                                        <span>积分：</span> <span>&nbsp; 3000</span>
                                    </Row>
                                    <Row class="i-userinfo">
                                        <span>会员等级：</span> <span>&nbsp; 1</span>
                                    </Row>
                                    <Row class="i-userinfo u-button">
                                        <router-link to="/userCenter" style="color: #1f1f21"><span >个人中心</span>
                                        </router-link>
                                    </Row>
                                    <Row class=" i-userinfo u-button">
                                        <span>退出登录</span>
                                    </Row>

                                </div>
                            </Poptip>
                            <Button type="warning" ghost shape="circle">会员中心</Button>
                        </div>


                        <div v-else>
                            <Button type="success" ghost @click="loginModal = true">登录</Button>
                            <Modal
                                    v-model="loginModal"
                                    class="user-model" width="360px">
                                <p slot="header" style="color:white;text-align:center">
                                    <span style="font-size: 18px">用户登录</span>
                                </p>
                                <Row id="login-form" type="flex" justify="center">
                                    <Col span="22">
                                        <div v-if="passwordLogin">
                                            <Row class="f-r">
                                                <el-input placeholder="请输入用户名" v-model="loginData.username" size="medium" clearable>
                                                    <template slot="prepend" style="line-height: 16px">
                                                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                                                    </template>
                                                </el-input>
                                            </Row>
                                            <Row class="f-r">
                                                <el-input placeholder="请输入密码" type="password" v-model="loginData.password" size="medium"
                                                          show-password>
                                                    <template slot="prepend">
                                                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                                                    </template>
                                                </el-input>
                                            </Row>
                                            <Row class="f-r">
                                                <Col span="13">
                                                    <el-input placeholder="验证码" v-model="loginData.code" size="medium">
                                                        <template slot="prepend">
                                                            <Icon type="ios-key-outline" slot="prepend"/>
                                                        </template>
                                                    </el-input>
                                                </Col>
                                                <Col span="11">
                                                    <img id="codeImg" style="width: 75px; height: 35px; margin-left: 5px" :src="imgCode" />
                                                    <span><a @click="changeImg">看不清？</a></span>
                                                </Col>
                                            </Row>
                                        </div>

                                        <div v-else>
                                            <Row class="f-r">
                                                <el-input placeholder="请输入手机号" v-model="loginData.phone" size="medium" clearable>
                                                    <template slot="prepend" style="line-height: 16px">
                                                        <Icon type="ios-phone-portrait" slot="prepend"></Icon>
                                                    </template>
                                                </el-input>
                                            </Row>
                                            <Row class="f-r">
                                                <Col span="14">
                                                    <el-input placeholder="验证码" v-model="loginData.phoneCode" size="medium" clearable>
                                                        <template slot="prepend" style="line-height: 16px">
                                                            <Icon type="ios-key-outline" slot="prepend"></Icon>
                                                        </template>
                                                    </el-input>
                                                </Col>
                                                <Col span="10" style="padding-left: 10px">
                                                    <Button type="primary" size="large" :disabled="loginControl.sendBot"  @click="sendMsg(1)">{{loginControl.msg}}</Button>
                                                </Col>

                                            </Row>
                                        </div>

                                        <Row>
                                            <div class="l-tip" v-if="passwordLogin">
                                                <a @click="changeType">手机号快捷登陆</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a>忘记密码？</a>
                                            </div>
                                            <div class="l-tip" v-else>
                                                <a @click="changeType">账号密码登陆</a>
                                            </div>
                                        </Row>
                                    </Col>
                                </Row>
                                <div slot="footer">
                                    <Button type="success" size="large" long @click="loginOk">登录</Button>
                                </div>
                            </Modal>

                            <Button type="error" ghost @click="registerModal = true">注册</Button>
                            <Modal
                                    v-model="registerModal"
                                    class="user-model" width="360px">
                                <p slot="header" style="color:white;text-align:center">
                                    <span style="font-size: 18px">用户注册</span>
                                </p>
                                <Row id="register-form" type="flex" justify="center">
                                    <Col span="22">
                                        <div>
                                            <Row class="f-r">
                                                <el-input placeholder="请输入手机号" v-model="registerData.phone" size="medium" clearable>
                                                    <template slot="prepend" style="line-height: 16px">
                                                        <Icon type="md-phone-portrait" slot="prepend"></Icon>
                                                    </template>
                                                </el-input>
                                            </Row>
                                            <Row class="f-r">
                                                <el-input placeholder="请输入密码" type="password" v-model="registerData.password" size="medium"
                                                          show-password>
                                                    <template slot="prepend">
                                                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                                                    </template>
                                                </el-input>
                                            </Row>
                                            <Row class="f-r">
                                                <el-input placeholder="请重复密码" type="password" v-model="registerData.repassword" size="medium"
                                                          show-password>
                                                    <template slot="prepend">
                                                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                                                    </template>
                                                </el-input>
                                            </Row>
                                            <Row class="f-r">
                                                <el-input placeholder="请输入昵称" v-model="registerData.nick" size="medium" clearable>
                                                    <template slot="prepend" style="line-height: 16px">
                                                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                                                    </template>
                                                </el-input>
                                            </Row>
                                            <Row class="f-r">
                                                <Col span="15">
                                                    <el-input placeholder="请输入验证码" v-model="registerData.code" size="medium">
                                                        <template slot="prepend">
                                                            <Icon type="ios-key-outline" slot="prepend"/>
                                                        </template>
                                                    </el-input>
                                                </Col>
                                                <Col span="9">

                                                </Col>
                                            </Row>
                                            <Row class="f-r">
                                                <Col span="14">
                                                    <el-input placeholder="验证码" v-model="registerData.phoneCode" size="medium" clearable>
                                                        <template slot="prepend" style="line-height: 16px">
                                                            <Icon type="ios-key-outline" slot="prepend"></Icon>
                                                        </template>
                                                    </el-input>
                                                </Col>
                                                <Col span="10" style="padding-left: 10px">
                                                    <Button type="primary" size="large" :disabled="registerControl.sendBot"  @click="sendMsg(2)">{{registerControl.msg}}</Button>
                                                </Col>

                                            </Row>
                                        </div>

                                    </Col>
                                </Row>
                                <div slot="footer">
                                    <Button type="success" size="large" long @click="registerOk">注册</Button>
                                </div>
                            </Modal>
                        </div>

                    </div>

                </Col>
            </Row>
        </Affix>
    </div>
</template>

<script>
    export default {
        name: "header",
        data() {
            return {
                //登录状态
                loginState: true,
                //显示登录弹窗
                loginModal: false,
                //显示注册弹窗
                registerModal: false,
                //公共uri
                uri: "http://localhost:8080",
                imgCode: "http://47.91.221.24:8080/gamble-web/images/captcha",
                loginData: {
                    username: "",
                    password: "",
                    code: "",
                    phone:"",
                    type: 1,
                    phoneCode:""
                },
                registerData: {
                    phone: "",
                    nick: "",
                    code: "",
                    phoneCode: "",
                    password: "",
                    repassword: "",
                    recommendId: ""
                },
                loginControl: {sendBot:false,sendState: true,msg: "发送验证码"},
                registerControl: {sendBot:false,sendState: true,msg: "发送验证码"},
                passwordLogin: true,
            }
        },
        methods: {
            loginOk() {
                this.$Message.info('登录成功！');
                this.loginModal = false;
            },
            registerOk() {
                this.$Message.info('注册成功！');
                this.registerModal = false
            },changeType() {
                this.passwordLogin = !this.passwordLogin;
                this.type == 1? 2: 1
            },
            changeState (type,state) {
                if (type == 1) {
                    this.loginControl.sendState = state
                } else {
                    this.registerControl.sendState = state
                }
            },
            changeBot(type, bot){
                if (type == 1) {
                    this.loginControl.sendBot = bot
                } else {
                    this.registerControl.sendBot = bot
                }
            },
            changeMsg(type, msg) {
                if (type == 1) {
                    this.loginControl.msg = msg
                } else {
                    this.registerControl.msg = msg
                }
            },
            logoClick() {
                this.$router.go(0)
            },

            //更换验证码
            changeImg() {
                this.imgCode = "http://47.91.221.24:8080/gamble-web/images/captcha?t=" + Math.random();
            },
            //发送短信
            sendMsg(type) {
                let phone;
                let state;
                let bot;
                //登录
                if (type == 1) {
                    phone = this.loginData.phone;
                    bot = this.loginControl.sendBot;
                    state = this.loginControl.sendState;
                } else {
                    //注册
                    phone = this.registerData.phone;
                    bot = this.registerControl.sendBot;
                    state = this.registerControl.sendState;
                }

                if (!(/^1[34578]\d{9}$/.test(phone))){
                    this.$Message.error('手机号不正确！');
                    return;
                }
                if (bot) {
                    return;
                }
                if (state) {
                    this.changeState(type, false);
                    this.changeBot(type, true);
                } else {
                    return;
                }
                this.$Message.info('发送成功！');
                let total = 60;
                this.changeMsg(type, total + 's重新发送')
                let clock = window.setInterval(() => {
                    total--
                    this.changeMsg(type, total + 's重新发送')
                    if (total == 0) {
                        this.changeState(type, true)
                        window.clearInterval(clock);
                        this.changeMsg(type, '重新发送')
                        this.changeBot(type, false)
                    }
                },1000)
            }
        }
    }
</script>

<style scoped>
    #header {
        background-color: #1f1f21;
    }

    #header /deep/ ul {
        border: none;
    }

    .he:hover {
        background-color: #353537!important;
    }

    #logo-link {

        padding-top: 5px
    }

    .h-center {
        display: flex;
        justify-content: center;
        align-items: Center;
    }

    .h-search {
        margin-top: 15px;
    }

    .h-search /deep/ input {
        background-color: #353537;
        border: solid 1px #353537;
    }
    #info-header {
        background: url("../assets/user/infoback.png") no-repeat;
        width: 100%;
        text-align: left;
        color: white;
    }
    #header-info {
        padding: 15px 10px;
    }
    .i-userinfo {
        padding: 6px 0 6px 10px;
        border-bottom: solid 1px #e3e8ee;
        text-align: left;
        font-size: 14px;
    }

    .i-userinfo:hover {
        background-color: #ffae12;
        color: white;
    }

    .u-button {
        cursor: pointer;
    }
    .user-model /deep/ .ivu-modal-content {
        background: rgba(38, 40, 43, 0.8);
    }
    .f-r {
        padding: 10px 0;
    }
</style>